<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Partytown Test Page" />
  <title>Iframe</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
        Apple Color Emoji, Segoe UI Emoji;
      font-size: 12px;
    }

    h1 {
      margin: 0 0 15px 0;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      padding: 16px 8px;
    }

    a:link,
    a:visited {
      text-decoration: none;
      color: blue;
    }

    a:hover {
      background-color: #eee;
    }

    li {
      display: block;
      height: 80px;
    }

    li strong,
    li code,
    li button {
      white-space: nowrap;
      margin: 0 5px;
      min-width: 10px;
    }

    iframe {
      width: 100%;
      height: 36px;
      border: none;
    }
  </style>
  <script>
    window.name = 'Main';
  </script>
  <script>
    partytown = {
      logCalls: true,
      logGetters: true,
      logSetters: true,
      logImageRequests: true,
      logSendBeaconRequests: true,
      logStackTraces: false,
      logScriptExecution: true,
    };
  </script>
  <script src="/~partytown/debug/partytown.js"></script>
</head>

<body>
  <h1>Iframe</h1>
  <ul>
    <li>
      <strong>createElement('iframe'), set src</strong>
      <code id="testSrc"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSrc');
            const iframe = document.createElement('iframe');
            iframe.addEventListener('load', function (ev) {
              const iframeDocument = iframe.contentDocument;
              const iframeOutput = iframeDocument.getElementById('output');
              elm.textContent = iframe.contentDocument.getElementById('output').textContent;
              elm.className = 'testSrc';
            });
            iframe.src = 'content.html';
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>createElement('iframe'), setAttribute('src')</strong>
      <code id="testSrcAttr"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSrcAttr');
            const iframe = document.createElement('iframe');
            iframe.addEventListener('load', function (ev) {
              const iframeDocument = iframe.contentDocument;
              const iframeOutput = iframeDocument.getElementById('output');
              elm.textContent = iframe.contentDocument.getElementById('output').textContent;
              elm.className = 'testSrcAttr';
            });
            iframe.setAttribute('src', 'content.html');
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>iframe.onload</strong>
      <code id="testOnload"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testOnload');
            const iframe = document.createElement('iframe');
            iframe.onload = function (ev) {
              elm.textContent = ev.type;
              elm.className = 'testOnload';
            };
            iframe.src = 'content.html';
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>contentWindow.document</strong>
      <code id="testContentWindow"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testContentWindow');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: cornflowerblue; color: white; }</style>
            `;

            iframe.contentWindow.document.body.innerHTML = `contentWindow`;
            elm.textContent = iframe.contentWindow.document.body.textContent;
            elm.className = 'testContentWindow';
          })();
        </script>
    </li>

    <li>
      <strong>contentDocument</strong>
      <code id="testContentDocument"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testContentDocument');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentDocument.head.innerHTML = `
              <style>body { background: aquamarine; }</style>
            `;
            iframe.contentDocument.body.innerHTML = `contentDocument`;
            elm.textContent = iframe.contentWindow.document.body.textContent;
            elm.className = 'testContentDocument';
          })();
        </script>
    </li>

    <li>
      <strong>get contentWindow.someGlobalVar</strong>
      <code id="testGetSomeGlobalVar"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testGetSomeGlobalVar');
            const iframe = document.createElement('iframe');
            iframe.addEventListener('load', function (ev) {
              const iframeWindow = iframe.contentWindow;
              const mph = iframeWindow.someGlobalVar.mph;
              const iframeDocument = iframeWindow.document;
              const iframeOutput = iframeDocument.getElementById('output');
              iframeOutput.textContent = mph;
              elm.textContent = mph;
              elm.className = 'testGetSomeGlobalVar';
            });
            iframe.src = 'global-var.html';
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>set contentWindow.someGlobalVar</strong>
      <code id="testSetSomeGlobalVar"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSetSomeGlobalVar');
            const iframe = document.createElement('iframe');
            iframe.addEventListener('load', function (ev) {
              iframe.contentWindow.someOtherVar = 99;
              elm.textContent = iframe.contentWindow.someOtherVar;
              const iframeOutput = iframe.contentDocument.getElementById('output');
              iframeOutput.textContent = iframe.contentWindow.someOtherVar;
              elm.className = 'testSetSomeGlobalVar';
            });
            iframe.src = 'global-var.html';
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>script.src set, window.someWindowVar</strong>
      <code id="testSetSomeWindowVar"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSetSomeWindowVar');
            const iframe = document.createElement('iframe');
            iframe.addEventListener('load', function (ev) {
              const iframeWin = iframe.contentWindow;
              const iframeSomeWindowVar = iframeWin.someWindowVar;
              elm.textContent = iframeSomeWindowVar.year;
              elm.className = 'testSetSomeWindowVar';
            });
            iframe.src = 'external-js.html';
            elm.parentNode.insertBefore(iframe, null);
          })();
        </script>
    </li>

    <li>
      <strong>window.top / window.parent</strong>
      <code id="testTopSomeValue"></code>
      <script type="text/partytown">
          (function () {
            window.year = 1955;
            window.gw = 1.21;
          })();
        </script>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testTopSomeValue');
            const iframe = document.createElement('iframe');

            const elmParentNode = elm.parentNode;
            elmParentNode.insertBefore(iframe, null);

            const iframeWin = iframe.contentWindow;
            const iframeDoc = iframeWin.document;
            const iframeHead = iframeDoc.head;

            iframeHead.innerHTML = `
              <style>body { background: peachpuff; }</style>
            `;

            iframe.contentDocument.body.innerHTML = window.year + window.gw;

            const script = iframe.contentDocument.createElement('script');
            script.innerHTML = `
              const topWin = window.top;
              const topWinValue = topWin.year;

              const parentWin = window.parent;
              const parentWinValue = parentWin.gw;
              const value = parentWinValue + topWinValue;

              const parentDocument = parentWin.document;
              const elm = parentDocument.getElementById('testTopSomeValue');
              elm.textContent = value;
              elm.className = 'testTopSomeValue';
            `;
            iframe.contentDocument.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>script.src set, window.parent</strong>
      <code id="testScriptWindowParent"></code>
      <script type="text/partytown">
          testScriptWindowParent = { year: 1885 };
        </script>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testScriptWindowParent');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: maroon; color: white; }</style>
            `;

            const script = iframe.contentWindow.document.createElement('script');
            script.addEventListener('load', () => {
              elm.className = 'testScriptWindowParent';
            });

            script.src = 'parent-window.js';
            iframe.contentWindow.document.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>document.currentScript</strong>
      <code id="testCurrentScript"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testCurrentScript');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: purple; color: white; }</style>
            `;

            const script = iframe.contentWindow.document.createElement('script');
            script.src = 'current-script.js';
            iframe.contentWindow.document.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>script.onload</strong>
      <code id="testScriptOnload"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testScriptOnload');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: green; color: white; }</style>
            `;

            const script = iframe.contentWindow.document.createElement('script');
            script.onload = function (ev) {
              const elm = window.parent.document.getElementById('testScriptOnload');
              elm.textContent = ev.type;
              elm.className = 'testScriptOnload';
              const div = iframe.contentDocument.createElement('div');
              div.textContent = elm.textContent;
              iframe.contentDocument.body.appendChild(div);
            };
            script.src = 'onload.js';
            iframe.contentWindow.document.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>different document.createElement</strong>
      <code id="testDiffDocumentCreateElement"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testDiffDocumentCreateElement');
            const iframe = document.createElement('iframe');
            elm.parentNode.insertBefore(iframe, null);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: yellow; }</style>
            `;

            const section = document.createElement('section');
            section.textContent = section.localName;
            iframe.contentDocument.body.appendChild(section);

            const script = document.createElement('script');
            script.innerHTML = `
              const elm = self.parent.document.getElementById('testDiffDocumentCreateElement');
              elm.textContent = 'section';
              elm.className = 'testDiffDocumentCreateElement';
            `;
            iframe.contentWindow.document.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>about:blank location</strong>
      <code id="testAboutBlank"></code>
      <code id="testAboutBlankSrc">--</code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testAboutBlank');
            const iframe = document.createElement('iframe');
            elm.parentNode.appendChild(iframe);
            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: gray; }</style>
            `;
            const iframeWindow = iframe.contentWindow;
            const iframeLocation = iframeWindow.location;

            const div = document.createElement('div');
            div.textContent = iframeLocation.href;
            iframe.contentDocument.body.appendChild(div);

            const testAboutBlankSrc = document.getElementById('testAboutBlankSrc');
            testAboutBlankSrc.textContent = iframe.src;

            elm.textContent = iframeLocation.href;
            elm.className = 'testAboutBlank';
          })();
        </script>
    </li>

    <li>
      <strong>set about:blank location</strong>
      <code id="testSetAboutBlankHref">--</code>
      <code id="testSetAboutBlankSrc">--</code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSetAboutBlankHref');

            const iframe = document.createElement('iframe');
            iframe.src = 'about:blank';
            elm.parentNode.appendChild(iframe);

            const elm2 = document.getElementById('testSetAboutBlankSrc');
            elm2.textContent = String(iframe.contentWindow.location.href);

            elm.textContent = String(iframe.src);
          })();
        </script>
    </li>

    <li>
      <strong>set/call window.parent.fn()</strong>
      <code id="testSetCallWindowParentFn"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testSetCallWindowParentFn');
            const iframe = document.createElement('iframe');
            elm.parentNode.appendChild(iframe);

            iframe.contentWindow.document.head.innerHTML = `<style>body { background: orange; }</style>`;

            const script = document.createElement('script');
            script.src = 'fn-on-window.js';
            iframe.contentWindow.document.body.appendChild(script);

            script.onload = () => {
              const rtn = sum1955(30);
              elm.textContent += ' ' + rtn;
              elm.className = 'testSetCallWindowParentFn';
              iframe.contentDocument.getElementById('output').textContent = elm.textContent;
            };
          })();
        </script>
    </li>

    <li>
      <strong>call window.parent.fn()</strong>
      <code id="testCallWindowParentFn"></code>
      <script type="text/partytown">
          (function () {
            window.sum1985 = (a) => {
              return 1985 + a;
            };

            const elm = document.getElementById('testCallWindowParentFn');
            const iframe = document.createElement('iframe');
            elm.parentNode.appendChild(iframe);

            iframe.contentWindow.document.head.innerHTML = `
              <style>body { background: blue; color: white; }</style>
            `;

            const script = document.createElement('script');
            script.src = 'call-fn-on-parent.js';
            iframe.contentWindow.document.body.appendChild(script);
          })();
        </script>
    </li>

    <li>
      <strong>onload w/out src</strong>
      <code id="testOnLoadNoSrc"></code>
      <script type="text/partytown">
          (function () {
            const elm = document.getElementById('testOnLoadNoSrc');
            const iframe = document.createElement('iframe');

            iframe.onload = function () {
              const iframeDoc = iframe.contentDocument;
              iframeDoc.head.innerHTML = `
                <style>body { background: lime; }</style>
              `;
              elm.textContent = `onload`;
              iframeDoc.body.innerHTML = `onload`;
              elm.className = 'testOnLoadNoSrc';
            };

            iframe.onerror = function (ev) {
              const iframeDoc = iframe.contentDocument;
              iframeDoc.head.innerHTML = `
                <style>body { background: pink; }</style>
              `;
              elm.textContent = `onerror`;
              iframeDoc.body.innerHTML = `onerror`;
              elm.className = 'testOnLoadNoSrc';
            };

            elm.parentNode.appendChild(iframe);
          })();
        </script>
    </li>

  </ul>

  <hr />
  <p><a href="/tests/">All Tests</a></p>
</body>

</html>